/**
 * webpack的配置文件
 */
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const EsLintPlugin = require('eslint-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const path = require('path')

module.exports = (env, argv) => {
  console.log(env, '====================env===================')
  let config = {
    // 打包模式
    mode: 'development',
    // 入口配置
    entry: './src/index.js',
    // 出口配置
    output: {
      // 打包文件路径
      path: path.resolve(__dirname, 'dist1'),
      // 打包文件名
      filename: 'bundle.js'
    },
    // Loader执行顺序：先右后左，先下后上
    module: {
      rules: [
        // {
        //   test: /\.css$/i,
        //   use: ['style-loader', 'css-loader']
        // },
        // {
        //   test: /\.css$/i,
        //   use: [MiniCssExtractPlugin.loader, 'css-loader']
        // },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader,
            'css-loader',
            // 通过postcss-loader给样式属性添加浏览器前缀
            'postcss-loader'
          ]
        },
        {
          test: /\.less$/i,
          use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          {
            loader: 'css-loader',
            options: {
              esModule: false
            }
          },
            // 通过postcss-loader给样式属性添加浏览器前缀
            'postcss-loader',
            'less-loader']
        },
        {
          test: /\.(png|gif|jpe?g)$/i,
          // use: {
          //   loader: 'url-loader',
          //   options: {
          //     // 指定图片大小，小于该数值的图片，会被转成base64
          //     limit: 800 * 1024,// 8kb
          //     // name是图片原来的名称，ext是图片原来的后缀名
          //     name: 'image/[name].[ext]',
          //     esModule: false
          //   }
          // }
          type: 'asset',
          parser: {
            dataUrlCondition: {
              // 指定图片大小，小于该数值的图片，会被转成base64
              maxSize: 8 * 1024
            }
          },
          generator: {
            // name是图片原来的名称，ext是图片原来的后缀名,ext本身自己带`.`
            filename: 'image/[name][ext]'
          }
        },
        {
          test: /\.(htm|html)$/i,
          loader: 'html-loader',
          options: {
            esModule: false
          }
        },
        {
          test: /\.m?js$/i,
          exclude: /node_modules/, // 排除不需要打包的⽬录
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env', {
                    // 按需加载
                    useBuiltIns: 'usage',
                    corejs: 3,
                    // targets: 'defaults'
                    // 指定浏览器兼容的版本
                    targets: {
                      chrome: '58',
                      ie: '9',
                      firefox: '60',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        }
      ]
    },
    // 开发服务器
    devServer: {
      // 指定加载内容的路径
      static: {
        directory: path.resolve(__dirname, 'dist1')
      },
      // 启用gzip压缩
      compress: true,
      // 指定端口号
      port: 9200,
      //  启用自动更新，（禁用hot）
      liveReload: true,
      // 配置代理,解决接口跨域问题
      proxy: {
        "/api": {
          // http://localhost:9200/api ----> https://api.github.com/api
          target: 'https://api.github.com',
          // http://localhost:9200/api ----> https://api.github.com/
          pathRewrite: {
            '^/api': ''
          },
          changeOrigin: true,
          open: true
        }
      }
    },
    // [name]：表示不改变默认值， 也可以直接指定：css/myMain.css
    plugins: [
      new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
      // 压缩css
      new OptimizeCssAssetsPlugin(),
      new EsLintPlugin({
        // 自动解决常规的代码报错问题
        fix: true
      }),
      // 打包之前，先删除历史文件
      new CleanWebpackPlugin()
    ]
  }
  
  // 判断当前是否是生产环境打包
  if(env.production){
    config.mode = 'production'
  }
  return config
}